<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Creative CSS3 Animation Menus</title>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
        <link rel="stylesheet" href="css/reset.css">     
        <link rel="stylesheet" href="css/style.css" />
        <link rel="stylesheet" href="fa/css/font-awesome.css">
    </head>
    <body>
        <div class="header">
            <div class="top clearfix">
                <div class="left"><a class="sunflowers" href="#"><img src="images/sunflowers.png"></a></div>
                <div class="right">
                    <p>Life is about trusting our feelings and taking chances,losing and finding happiness</p>
                </div>
            </div>  
        </div>
        <div class="content">
           <div class="top clearfix">
            <table>
                <tr>
                    <td>姓名</td>
                    <td>孙何辉</td>
                </tr>
                <tr>
                    <td>学校</td>
                    <td>燕山大学</td>
                </tr>
                <tr>
                    <td>联系电话</td>
                    <td>183-3258-0459</td>
                </tr>
                <tr>
                    <td>邮箱</td>
                    <td>m18332580459@163.com</td>
                </tr>
                <tr>
                    <td>期望职位</td>
                    <td>web前端开发</td>
                </tr>
            </table> 
            <div class="my">
                <div class="pic"></div>
                <p>爱生活 &nbsp爱编程 &nbsp爱自己</p>
            </div>
           </div>
			<ul class="ca-menu clearfix">
                    <li>
                        <a href="website\index.html">
                            <span><i class="fa fa-thumbs-up"></i></span>
                            <div class="ca-content">
                              <h2 class="ca-main">Website Reconstruction</h2>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="h5\index.html">
                            <span><i class="fa fa-folder-open"></i></span>
                            <div class="ca-content">
                                <h2 class="ca-main">H5+css3 +Compatibility</h2>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="responsive\index.html">
                            <span><i class="fa fa-heart"></i></span>
                            <div class="ca-content">
                                <h2 class="ca-main">Responsive</h2>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="javascripts\index.html">
                           <span><i class="fa fa-comments"></i></span>
                            <div class="ca-content">
                                <h2 class="ca-main">JavaScripts</h2>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="electronic\index.html">
                           <span><i class="fa fa-cog"></i></span>
                            <div class="ca-content">
                                <h2 class="ca-main">Electronic Commerce</h2>
                            </div>
                        </a>
                    </li>
            </ul>
        </div>
        <script src="js\jquery-1.11.1.js"></script>
        <script>
           $(".sunflowers").click(function(){
              var scroll_offset1 = $("table").offset();
              $("body,html").animate({
                scrollTop:scroll_offset1.top  //让body的scrollTop等于top，就实现了滚动
              },700); 
           })
        </script>
    </body>
</html>